

const soudTemplate = document.createElement('template');



soudTemplate.innerHTML = `
  <link rel="stylesheet" href=".${isRoot ? "" : "."}/init.css">
  <style>
    .btn {width: 30px;height: 30px;}
    .btn {
        background: url("${isRoot ? "" : "."}./images/play.png") center center no-repeat;
        background-size: cover;
    }
    .btn.play {
        background: url("${isRoot ? "" : "."}./images/pause.png") center center no-repeat;
        background-size: cover;
    }
  </style>
<audio id="soud" control src="./images/好运来.mp3"></audio>
<div class="btn"></div>
`;

class Soud extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ mode: 'open' });
        this._shadowRoot.appendChild(soudTemplate.content.cloneNode(true));
        this.audio = this._shadowRoot.querySelector("#soud");
        this.btn = this._shadowRoot.querySelector(".btn");
        this.bindEvent();
    }

    bindEvent() {
        this.btn.addEventListener("click", () => {
            const isPlay = !this.audio.paused;
            this.btn.classList.toggle("play");
            if (isPlay) {
                this.audio.pause();
            } else {
                this.audio.play();
            };
        }, false);
    }


}

window.customElements.define("x-soud", Soud);
